<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<style>
.Registered {
	display: -ms-flexbox;
	display: flex;
	width: 1000px;
	margin: 0 auto;
	background-color: #fffdfa;
	border: 1px solid #f4f0ed;
	-ms-flex-pack: center;
	justify-content: center;
	padding: 30px 0
}

.Registered .register_forms {
	display: -ms-flexbox;
	display: flex;
	width: 570px;
	-ms-flex-direction: column;
	flex-direction: column
}

.Registered .register_forms h1 {
	-ms-flex: 1 1;
	flex: 1 1;
	color: #059BF3;
	font-size: 22px;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-pack: center;
	justify-content: center;
	-ms-flex-align: center;
	align-items: center;
	margin: 20px 0
}

.Registered .register_forms .from, .Registered .register_forms .from .form_group
	{
	display: -ms-flexbox;
	display: flex;
	-ms-flex-direction: column;
	flex-direction: column
}

.Registered .register_forms .from .form_group .form_required {
	color: red
}

.Registered .register_forms .from .form_group .column {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-direction: row;
	flex-direction: row;
	-ms-flex-align: center;
	align-items: center;
	-ms-flex-pack: center;
	justify-content: center
}

.Registered .register_forms .from .form_group .column .lable {
	-ms-flex: 0.4 1;
	flex: 0.4 1;
	-ms-flex-pack: end;
	justify-content: flex-end;
	display: -ms-flexbox;
	display: flex;
	font-size: 16px !important;
}

.Registered .register_forms .from .form_group .column .lable span {
	margin-right: 10px
}

.Registered .register_forms .from .form_group .column>div:nth-child(2) {
	-ms-flex: 0.7 1;
	flex: 0.7 1;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-direction: row;
	flex-direction: row;
}

.Registered .register_forms .from .form_group .column>div:nth-child(2) img
	{
	margin-left: 20px
}

.Registered .register_forms .from .form_group .column>div {
	margin: 0 6px
}

.Registered .register_forms .from .form_group .column input {
	width: 310px;
	border: 1px solid #ddd;
	font-size: 18px;
	height: 50px;
	text-align: start;
	padding: 0 8px
}

.Registered .register_forms .from .form_group .column .captcha {
	width: 160px
}

.Registered .register_forms .from .form_group .column .icon-duigou1 {
	color: #00e067;
	font-size: 24px
}

.Registered .register_forms .from .form_group .column_tip {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-pack: center;
	justify-content: center;
	color: red;
	font-size: 14px;
	margin: 10px 0;
	margin-left: 140px
}

.Registered .register_forms .from .select-tos {
	display: -ms-flexbox;
	display: flex;
	font-size: 12px;
	-ms-flex-pack: center;
	justify-content: center;
	-ms-flex-align: center;
	align-items: center;
	color: #333;
	margin: 20px 0
}

.Registered .register_forms .from .select-tos i {
	font-size: 20px;
	margin: 0 4px
}

.Registered .register_forms .from .select-tos .icon-tickEmpty {
	color: #00bdf7
}

.Registered .register_forms .from .select-tos .icon-rect1 {
	color: #ccc
}

.Registered .register_forms .from .select-tos a {
	color: #ff8307
}

.Registered .register_forms .from .register {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-pack: center;
	justify-content: center;
	width: 568px !important;
}

.Registered .register_forms .from .register button {
	background-color: #059BF3;
	color: #fff;
	padding: 10px 0;
	border-radius: 4px;
	width: 310px;
	font-size: 24px;
	font-weight: 600;
	border: none;
	outline: none;
}
</style>
</head>
	<div class="Registered">
		<div class="register_forms">
			<h1>会员注册</h1>
			<div class="from">
				<div class="form_group">
					<div class="column">
						<div class="lable">
							<span class="form_required">*</span>用户名
						</div>
						<div>
							<input type="text" id="name" maxlength="16" placeholder="6-16之间数字/字母/下划线组成">
						</div>
						<div>
							<i class="iconfont icon-duigou1" style="visibility: hidden;"></i>
						</div>
					</div>
					<div class="column_tip" style=""><!-- 6-16之间，由字母/数字/下划线组成6-16个字符 --></div>
				</div>
				<div class="form_group">
					<div class="column">
						<div class="lable">
							<span class="form_required">*</span>登陆密码
						</div>
						<div>
							<input type="password" id="pass1" maxlength="16" placeholder="6-16之间数字/字母/下划线组成">
						</div>
						<div>
							<i class="iconfont icon-duigou1" style="visibility: hidden;"></i>
						</div>
					</div>
					<div class="column_tip" style="visibility: hidden;">密码长度为6位以上，由数字/字母/下划线组成</div>
				</div>
				<div class="form_group">
					<div class="column">
						<div class="lable">
							<span class="form_required">*</span>确认密码
						</div>
						<div>
							<input type="password" id="pass2"  maxlength="16" placeholder="6-16之间数字/字母/下划线组成">
						</div>
						<div>
							<i class="iconfont icon-duigou1" style="visibility: hidden;"></i>
						</div>
					</div>
					<div class="column_tip" style="visibility: hidden;">密码长度为6位以上，由数字/字母/下划线组成</div>
				</div>
				<div class="form_group">
					<div class="column">
						<div class="lable">QQ</div>
						<div>
							<input type="text"  id="qq" placeholder="请填写你QQ"  maxlength="15" value="">
						</div>
						<div>
							<i class="iconfont icon-duigou1" style="visibility: hidden;"></i>
						</div>
					</div>
					<div class="column_tip" style="visibility: hidden;">邀请码为数字/数字字母混合</div>
				</div>
				<div class="form_group">
					<div class="column">
						<div class="lable">手机号</div>
						<div>
							<input type="text" id="telephone"  maxlength="11" placeholder="请填写你手机号" value="">
						</div>
						<div>
							<i class="iconfont icon-duigou1" style="visibility: hidden;"></i>
						</div>
					</div>
					<div class="column_tip" style="visibility: hidden;">邀请码为数字/数字字母混合</div>
				</div>
				<div class="form_group">
					<div class="column">
						<div class="lable">邀请码</div>
						<div>
							<input type="text" id="invitationCode"  maxlength="11" placeholder="请填邀请码" value="">
						</div>
						<div>
							<i class="iconfont icon-duigou1" style="visibility: hidden;"></i>
						</div>
					</div>
					<div class="column_tip" style="visibility: hidden;">邀请码为数字/数字字母混合</div>
				</div>
				<div class="form_group">
					<div class="column">
						<div class="lable">
							<span class="form_required">*</span>验证码
						</div>
						<div>
							<input type="text" id="code"  maxlength="4" placeholder="请输入验证码" class="captcha">
							<div role="presentation">
								<img src="/u/code.do" class="code" 
									style="display: block; line-height: 37px; width: 100px; margin-top: 9px;" />
							</div>
						</div>
						<div>
							<i class="iconfont icon-duigou1" style="visibility: hidden;"></i>
						</div>
					</div>
				</div>
				<div class="select-tos">
					<span><i class="iconfont icon-tickEmpty" role="presentation"></i></span><span>我已经满合法博彩年龄，且同意各项开户条约，</span>
					<a href="" target="_block">“开户协议”</a>
				</div>
				<div class="register">
					<button>立即注册</button>
				</div>
			</div>
		</div>
	</div>
	<div class="modal-div-fakeModal" id="div-i-noticeGenDan">
		<div class="div-c-modalContent">
			<h3 class="fakemodal-title"></h3>
			<div class="fakemodal-content"></div>
			<div class="fakemodal-btnsGroup"><button class="btn btn-default btn-class-closeFakeModal">关闭</button></div>
		</div>
	</div>
<script type="text/javascript">
	var nameOk=false;
	$("#name").blur(function(){
		$.ajax({
			url:'/u/checkUser.do',
			data:{name:$("#name").val()},
			type:'get',
			success:function(data){
				if(data.data==0){  //0  用户不存在"
					nameOk=true;
				}else{ //1  用户存在"
					nameOk=false;
					bindLayerLittle("提示：", "该用户名已经存在噢") 
				}
				/* var json=eval('('+data+')');
				if(json.data==0){
					
					//$("#notice").text(isNull());
				}else{
					  
				} */
			}
		});
	});
	$(".register").click(function(){
		var phone=/^[1][3,4,5,7,8,9][0-9]{9}$/;
		var qqReg = /^[1-9]\d{4,10}$/
		if (!$("#name").val() || !$("#pass1").val() || !$("#pass2").val() || !$("#qq").val() || !$("#code").val() || !$("#telephone").val()) {
			bindLayerLittle("提示：", "请填写完整信息")
			return
		}
		if ($("#telephone").val().trim() != "" && !phone.test($("#telephone").val())) {
			bindLayerLittle("提示：", "请输入正确的手机号")
			return					
		}
		if (!qqReg.test($("#qq").val())) {
			bindLayerLittle("提示：", "请输入正确的QQ号")
			return							
		}
		 
			$.ajax({
				url:'/u/register.do',
				data:{
					name:$("#name").val(),
					pass:$("#pass1").val(),
					qq:$("#qq").val(),
					code:$("#code").val(),
					invitationCode:$("#invitationCode").val(), 
					telephone: $("#telephone").val(),
					},
				type:'post',
				success:function(data){
				 	if(data.message == 1){
				 		$("#pageData").empty();
						$('#pageData').load('/pc/sy.do');
						userLogin()
						bindLayerLittle( "提示：", "注册成功")
					}else{
						bindLayerLittle( "提示：", data.data)
					}
				}
			});
		
	});
	
	$(".code").click(function(){
		$(".code").attr("src","/u/code.do?"+Math.random());
	});
	var accountReg = /^[a-zA-Z0-9_-]{4,10}$/
</script>
